<template>
  <div class="BaseSearch"> 
      <div class="left" v-if="showLeft">
          <div>成都</div>
          <image src="https://fangguaner.wm76.mtnet.ren/static/applet/image/xiala1.png" />
      </div>
      <div class="right">
          <image src="https://fangguaner.wm76.mtnet.ren/static/applet/image/search.png" mode="widthFix" />
          <input type="text" :placeholder="placeholder">
      </div>
  </div>
</template>

<script>
export default {
  props: {
    showLeft: {
      type: Boolean,
      default: true
    },
    placeholder:{
      type: String,
      default: '你想住在哪里？'
    }
  }
}
</script>

<style scoped lang="less">
.BaseSearch{
    background-color: #ffffff;
	border-radius: 10rpx;
	border: solid 2rpx #dfdfdf;
    height: 80rpx;
    display: flex;
        .left{
            width: 144rpx;
            // border: 1px solid red;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 10rpx;
            box-sizing: border-box;
            position: relative;
                image{
                    width: 12rpx;
                    height: 10rpx;
                }
        }
        .left::after{
            content: "";
            position: absolute;
            width: 1rpx;
            height: 27rpx;
            background-color: #cccccc;
            right: 0;
            top: 28rpx;
        }
        .right{
          width: 100%;
        //   border: 1px solid red;
          background-color: #ffffff;
          padding: 0 21rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
            image{
              width: 37rpx;
              height: 38rpx;
            }
            input{
              padding-left: 20rpx;
            }
        }
}
</style>